<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
 <%
 	String path = request.getContextPath();
 	request.setAttribute("path", request.getContextPath());
 	request.setAttribute("jsPath", path+"/js");
 	request.setAttribute("imgPath", path+"/img/");
 	request.setAttribute("libPath", path+"/lib/");
 	request.setAttribute("icoPath", path+"/ico/");
 	request.setAttribute("cssPath", path+"/css/");
 	request.setAttribute("vendorPath", path+"/vendor/");
 	request.setAttribute("distPath", path+"/dist");
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

   
    <link rel="shortcut icon" href="${icoPath}/favicon.ico" type="${imgPath}/x-icon" />
    <link rel="apple-touch-icon" href="${icoPath}/apple-touch-icon.png" />
    <link href="${vendorPath}bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${vendorPath}/skycons/css/skycons.css" rel="stylesheet" />
    <link href="${vendorPath}/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="${cssPath}/jquery.mmenu.css" rel="stylesheet" />
    <link href="${cssPath}/style.css" rel="stylesheet" />
    <link href="${cssPath}/add-ons.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="${libPath}/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${cssPath}/main.css">
    <script type="text/javascript" src="${distPath}/jquery.min.js"></script>
 	<script src="${distPath}/jquery.table2excel.js"></script>
    <script type="text/javascript">

    function btnStaff(){
    	alert(1);
        $(".staff").table2excel({
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "myFileName",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    }
 	    	function search(){
	    		
	    		$("#pageNum").val(1);
	    		$('#roleSearchForm').submit();
	    	}
	    	
	    	function goPage(pageNum){
	    		$("#pageNum").val(pageNum);
	    		$('#roleSearchForm').submit();
	    	} 
			
    </script>
    <style type="text/css">
    	#right{
    		width:75%;
    		height:500px;
    		float:left;
    		position: relative;
    	}
    	#context{
    		 position: absolute;
    		 top:30px;
    		 
    	}
    	#context .roleNav{
    		margin-bottom: 30px;
    	}
    	#context .roleNav ul{
    		width:100%;
    		height:30px;
    	}
    	#context .roleNav ul li{
    		width:125px;
    		height:30px;
    		float:left;
    		list-style: none;
    	}
    	#context .roleNav a{
    		text-decoration:none ;
    	}
    	#context .search{
    		margin-bottom: 10px;
    	}
    	#context .search input{
    		width:150px;
    		height:30px;
    		border-radius: 50px;
    	}
    	#context table{
    		width:100%;
    		height:auto;
    		display:block;
    		background-color: #CCCCCC;
    	}
    	#context table tr{
    		width:100%;
    		height:auto;
    		display:block;
    	}
    	#context table td,#context table th{
    		width:135px;
    		height:50px;
    		float:left;
    		display:block;
    		text-align: center;
    		font-size: 14px;
    	}
    </style>
</head>
<body>

<div class="navbar" role="navigation">

    <div class="container-fluid container-nav">
        <!-- Navbar Action -->
        <ul class="nav navbar-nav navbar-actions navbar-left">
            <li class="visible-md visible-lg"><a href="index.html#" id="main-menu-toggle"><i class="fa fa-th-large"></i></a></li>
            <li class="visible-xs visible-sm"><a href="index.html#" id="sidebar-menu"><i class="fa fa-navicon"></i></a></li>
        </ul>
        <!-- Navbar Left -->
        <div class="navbar-left">
            <!-- Search Form -->
            <form class="search navbar-form">
                <div class="input-group input-search">
                    <input type="text" class="form-control" name="q" id="q" placeholder="Search...">
							<span class="input-group-btn">
								<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
							</span>
                </div>
            </form>
        </div>
        <!-- Navbar Right -->
        <div class="navbar-right">
            <!-- Notifications -->
            <ul class="notifications hidden-sm hidden-xs">
                <li>
                    <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                        <i class="fa fa-tasks"></i>
                        <span class="badge">10</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                        <i class="fa fa-envelope"></i>
                        <span class="badge">5</span>
                    </a>
                  
                </li>
                <li>
                    <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                        <i class="fa fa-bell"></i>
                        <span class="badge">3</span>
                    </a>
                </li>
            </ul>
            <!-- End Notifications -->
            <!-- Userbox -->
            <div class="userbox">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <div class="profile-info">
                        <span class="name">John Smith Doe</span>
                        <span class="role">Developer</span>
                    </div>
                    <i class="fa custom-caret"></i>
                </a>
             </div>
            <!-- End Userbox -->
        </div>
        <!-- End Navbar Right -->
    </div>
</div>
<div class="container-fluid content">
    <div class="row">

        <div id="left">
            <div class="media user-media bg-dark dker">
                <div class="user-media-toggleHover">
                    <span class="fa fa-user"></span>
                </div>
                <div class="user-wrapper bg-dark">
                    <a class="user-link" href="">
                        <img class="media-object img-thumbnail user-img" alt="User Picture" src="${imgPath}/user.gif">
                    </a>
				<div class="media-body">
                        <h5 class="media-heading">用户登录</h5>
                        <ul class="list-unstyled user-info">
                            <li><a href="">Administrator</a></li>
                            <li>Last Access : <br>
                                <small><i class="fa fa-calendar"></i>&nbsp;16 Mar 16:32</small>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- #menu -->
            <ul id="menu" class="bg-blue dker">
                <li class="nav-header">菜单</li>
                <li class="nav-divider"></li>
                <li class="">
                    <a href="dashboard.html">
                        <i class="fa fa-dashboard"></i><span class="link-title">&nbsp;权限管理</span>
                    </a>
                </li>
                <li class="">
                    <a href="javascript:;">
                        <i class="fa fa-building "></i>
                        <span class="link-title">用户管理</span>
                        <span class="fa arrow"></span>
                    </a>

                </li>
                <li class="">
                    <a href="javascript:;">
                        <i class="fa fa-building "></i>
                        <span class="link-title">角色管理</span>
                        <span class="fa arrow"></span>
                    </a>

                </li>
                <li class="">
                    <a href="javascript:;">
                        <i class="fa fa-building "></i>
                        <span class="link-title">资源管理</span>
                        <span class="fa arrow"></span>
                    </a>

                </li>




            </ul>
            <!-- /#menu -->
        </div>

			<div id="right">
				<div id="context">
					<div class="roleNav">
						<ul>
							<li><a href="#">权限配置</a></li>
							<li><a href="#">删除角色</a></li>
							<li><a href="#">增加角色</a></li>
							<li><a href="#">修改角色</a></li>
							<li><a href="#">角色集</a></li>
						</ul>
					</div>

					<div class="search">
						<form id="roleSearchForm" action="${path}/sysrole/list"
							method="get">
							<label>角色名称：</label> <input type="text" name="name"
								value="${sysroleVo.name}" /> <input type="hidden" id="pageNum"
								name="pageNum" value="${sysroleVo.pageNum}" />
							<!-- <input type="submit" value="查询"/> -->
							<input type="button" value="查询" onclick="search()" />
						</form>
					</div>
					<div class="staff" data-tableName="Test Table 1">
						<table>
							<thead>
								<tr>
									<th>序号</th>
									<th>ID：</th>
									<th>账号</th>
									<th>姓名</th>
									<th>英文全名</th>
									<th>密码</th>
									<th>手机</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach var="s" items="${tstaffs}" varStatus="status">
									<tr>
										<td>${status.index+1}</td>
										<td>${s.staffId}</td>
										<td>${s.staffNum}</td>
										<td>${s.chnName}</td>
										<td>${s.surName}</td>
										<td>${s.pwd}</td>
										<td>${s.mobile}</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
					<button id="btnStaff">点击这里将表格内容导出到excel中</button>
					<input type="button" value="ok" onclick="btnStaff()"/>
					<a href="javaScript:void(0)"
						onclick="goPage(${sysroleVo.pageNum-1})">上一页</a> 第<input
						id="myPageNum" value="${sysroleVo.pageNum}" />页 <a
						href="javaScript:void(0)" onclick="goPage($('#myPageNum').val())">跳转</a>
					<a href="javascript:void(0)"
						onclick="goPage(${sysroleVo.pageNum+1})">下一页</a>
				</div>
			</div>
		</div>
</div>
</body>
</html>